<template>
  <div class="projectDetails">
    <div class="app-container details product-details">
      <el-row :gutter="24">
        <el-col :span="5" class="details-left box-card">
          <el-card>
            <!-- 系统介绍 -->
            <div class="details-left-top details-left-box">
              <div class="top">
                <svg-icon
                  :icon-class="'svg_xmgl'"
                  class="block w-80px h-80px m-auto mb-15px"
                />
                <label>{{ baseDetail.proName }}</label>
                <p>{{ baseDetail.proNum }}</p>
              </div>
              <!-- <el-row :gutter="24" class="mt-10px">
                <el-col
                  :span="8"
                  class="border-r-2 border-fuchsia-600 border-gray-100 border-r-solid"
                >
                  <p class="text-gray-700 font-bold text-base">1/10</p>
                  <p class="text-sm mt-10px">工单</p>
                </el-col>
                <el-col
                  :span="8"
                  class="border-r-2 border-fuchsia-600 border-gray-100 border-r-solid"
                >
                  <p class="text-gray-700 font-bold text-base">1/10</p>
                  <p class="text-sm mt-10px">任务</p>
                </el-col>
                <el-col :span="8">
                  <p class="text-gray-700 font-bold text-base">1/10</p>
                  <p class="text-sm mt-10px">订单</p>
                </el-col>
              </el-row> -->
            </div>
            <div class="details-left-box">
              <div class="cnt">
                <el-row :gutter="24" class="xmzcgk">
                  <el-col :span="12">
                    <el-button
                      class="w-100%"
                      plain
                      type="primary"
                      @click="clickFn('status')"
                      >状态更新</el-button
                    >
                  </el-col>
                  <el-col :span="12">
                    <div>
                      <el-checkbox-button
                        v-model="starFocus"
                        :class="starFocus ? 'w-100%' : 'w-100% starFocus'"
                        indeterminate
                        @change="focusChange"
                      >
                        <div class="flex items-center">
                          <span class="font-normal">{{
                            starFocus ? '取消关注' : '重点关注'
                          }}</span>
                        </div>
                      </el-checkbox-button>
                    </div>
                  </el-col>
                  <!-- <el-col :span="12">
                    <el-button
                      class="w-100%"
                      type="primary"
                      plain
                      @click="clickFn('followUp')"
                      >写新跟进</el-button
                    >
                  </el-col> -->
                  <el-col :span="12">
                    <el-button
                      class="w-100%"
                      plain
                      type="primary"
                      @click="recordTypeDialog.open = true"
                      >实施记录</el-button
                    >
                  </el-col>
                  <el-col :span="12">
                    <el-button
                      class="w-100%"
                      plain
                      type="primary"
                      @click="clickFn('check')"
                      >验收登记</el-button
                    >
                  </el-col>
                  <el-col :span="12">
                    <el-button
                      class="w-100%"
                      plain
                      type="primary"
                      @click="clickFn('contract')"
                      >添加合同</el-button
                    >
                  </el-col>
                  <el-col :span="12">
                    <el-button
                      class="w-100%"
                      plain
                      type="primary"
                      @click="clickFn('order')"
                      >添加订单</el-button
                    >
                  </el-col>
                  <el-col :span="12">
                    <el-button
                      class="w-100%"
                      plain
                      type="primary"
                      @click="clickFn('task')"
                      >添加任务</el-button
                    >
                  </el-col>
                  <el-col :span="12">
                    <el-button
                      class="w-100%"
                      plain
                      type="primary"
                      @click="clickFn('appendix')"
                      >添加附件</el-button
                    >
                  </el-col>
                  <!-- <el-col :span="12" class="dropdown">
                    <el-dropdown>
                      <el-button class="w-100% px-10" type="primary" plain
                        >添加</el-button
                      >
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item @click="clickFn('order')"
                            >订单</el-dropdown-item
                          >
                          <el-dropdown-item @click="clickFn('contract')"
                            >合同</el-dropdown-item
                          >
                          <el-dropdown-item @click="clickFn('task')"
                            >任务</el-dropdown-item
                          >
                          <el-dropdown-item @click="clickFn('word')"
                            >工单</el-dropdown-item
                          >
                          <el-dropdown-item @click="clickFn('followUp')"
                            >跟进</el-dropdown-item
                          >
                          <el-dropdown-item @click="clickFn('appendix')"
                            >附件</el-dropdown-item
                          >
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </el-col> -->
                  <el-col :span="24">
                    <el-button
                      class="w-100%"
                      plain
                      type="primary"
                      @click="clickFn('xm-appendix')"
                      >项目材料上传</el-button
                    >
                  </el-col>
                  <el-col v-if="baseDetail.proType == '1'" :span="24">
                    <el-button
                      class="w-100%"
                      plain
                      type="primary"
                      @click="clickFn('biddingResults')"
                      >投标结果反馈</el-button
                    >
                  </el-col>
                  <el-col v-if="baseDetail.proType == '1'" :span="24">
                    <el-button
                      class="w-100%"
                      plain
                      type="primary"
                      @click="clickFn('project')"
                    >
                      导出立项审批表
                    </el-button>
                  </el-col>
                  <el-col v-if="baseDetail.proType == '1'" :span="24">
                    <el-button
                      class="w-100%"
                      plain
                      type="primary"
                      @click="clickFn('bidding')"
                      >导出投标结果反馈表</el-button
                    >
                  </el-col>
                </el-row>
              </div>
            </div>
            <div class="details-left-box">
              <div class="title">项目信息</div>
              <ul class="cnt qzbm">
                <li>
                  <el-icon><Notebook /></el-icon>
                  <label>状态</label>
                  <p>
                    <dict-tag
                      :options="project_status"
                      :value="baseDetail.status"
                      class="inline-block"
                    />
                  </p>
                </li>
                <li>
                  <el-icon><Notebook /></el-icon>
                  <label>项目负责人</label>
                  <p>
                    {{ baseDetail.principal }}
                  </p>
                </li>
                <li>
                  <el-icon><Notebook /></el-icon>
                  <label>项目阶段</label>
                  <p>
                    <dict-tag
                      :isTag="false"
                      :options="project_phase"
                      :value="baseDetail.proSchedule"
                      class="inline-block"
                    />
                  </p>
                </li>
                <li>
                  <el-icon><Notebook /></el-icon>
                  <label>合同到期时间</label>
                  <p v-if="contractTable.length > 0">
                    {{
                      parseTime(contractTable[0].contractTimeEnd, '{y}-{m}-{d}')
                    }}
                  </p>
                </li>
              </ul>
            </div>
          </el-card>
        </el-col>
        <el-col :span="19" class="box-card" style="min-height: 800px">
          <!-- 项目详情 -->
          <el-card class="details-right" style="min-height: 100%">
            <el-tabs v-model="activeTabsName" class="details-right-tabs">
              <el-tab-pane label="审批记录" name="1_1">
                <ApprovalRecord
                  v-if="activeTabsName == '1_1'"
                  :baseDetail="baseDetail"
                  :biddingDetail="biddingDetail"
                ></ApprovalRecord>
              </el-tab-pane>
              <el-tab-pane label="概况信息" name="1">
                <pOverview
                  v-if="activeTabsName == '1'"
                  :baseDetail="baseDetail"
                  :biddingDetail="biddingDetail"
                  :financeDetail="financeDetail"
                />
              </el-tab-pane>
              <el-tab-pane
                v-if="baseDetail.proType == '1'"
                label="投标情况"
                name="2"
              >
                <TenderInfos
                  v-if="activeTabsName == '2'"
                  :baseDetail="baseDetail"
                  :biddingDetail="biddingDetail"
                  :financeDetail="financeDetail"
                  :scaleMarkVos="scaleMarkVos ? scaleMarkVos : []"
                />
              </el-tab-pane>
              <el-tab-pane label="项目合同" name="3_1">
                <ProjectContract
                  v-if="activeTabsName == '3_1'"
                  :baseDetail="baseDetail"
                  :contractTable="contractTable"
                  :financeDetail="financeDetail"
                  @contractOK="closeFn('contractStatus')"
                ></ProjectContract>
              </el-tab-pane>
              <el-tab-pane label="项目验收" name="3_2">
                <Acceptance
                  v-if="activeTabsName == '3_2'"
                  :acceptanceTable="acceptanceTable"
                ></Acceptance>
              </el-tab-pane>
              <el-tab-pane label="订单记录" name="order">
                <DetailsOrderList
                  v-if="activeTabsName == 'order'"
                  :tableParam="fistParams"
                ></DetailsOrderList>
              </el-tab-pane>
              <el-tab-pane label="发票记录" name="3_4">
                <InvoiceRecord
                  v-if="activeTabsName == '3_4'"
                  :tableParam="fistParams"
                ></InvoiceRecord>
              </el-tab-pane>
              <el-tab-pane label="回款记录" name="3_5">
                <RepaymentRecord
                  v-if="activeTabsName == '3_5'"
                  :tableParam="fistParams"
                ></RepaymentRecord>
              </el-tab-pane>
              <el-tab-pane label="项目文件" name="3">
                <AppendixList
                  v-if="activeTabsName == '3'"
                  :tableParam="followUpListParams"
                ></AppendixList>
              </el-tab-pane>
              <!-- <el-tab-pane label="跟进记录" name="4">
                <FollowUpList
                  :tableParam="followUpListParams"
                  v-if="activeTabsName == '4'"
                ></FollowUpList>
              </el-tab-pane> -->
              <el-tab-pane label="实施记录" name="4">
                <RecordsTable
                  v-if="activeTabsName == '4'"
                  :queryParams="{ ...baseDetail, contractTable }"
                />
              </el-tab-pane>
              <el-tab-pane label="任务详情" name="5">
                <taskDetailsForm
                  v-if="activeTabsName == '5'"
                  :taskParam="taskDetailsParam"
                ></taskDetailsForm>
              </el-tab-pane>
              <el-tab-pane label="操作记录" name="6">
                <OperationLog
                  v-if="activeTabsName == '6'"
                  :tableParam="followUpListParams"
                ></OperationLog>
              </el-tab-pane>
            </el-tabs>
          </el-card>
          <!-- 验收登记 -->
          <CheckAndAccept
            :acceptMsg="acceptMsg"
            :baseDetail="baseDetail"
            :checkParam="checkParam"
            :contractTable="contractTable"
            @close="closeFn"
          ></CheckAndAccept>
          <!-- 更新状态 -->
          <ProjectStatus
            :assemblyParam="assemblyParam"
            @close="closeFn"
          ></ProjectStatus>
        </el-col>
      </el-row>
    </div>
    <!-- 附件 -->
    <Appendix :dialogParam="appendixParam" @close="closeFn"></Appendix>
    <!-- 跟进 -->
    <FollowUp :dialogParam="followUpParam" @close="closeFn"></FollowUp>
    <!-- 新建任务 -->
    <TaskFrom
      :dialogParam="taskParam"
      @closeDialog="closeFn('task')"
    ></TaskFrom>

    <!-- 选择新增实施记录类型弹窗 -->
    <el-dialog
      v-model="recordTypeDialog.open"
      :close-on-click-modal="false"
      :title="recordTypeDialog.title"
      width="40%"
    >
      <el-row>
        <el-col :span="24" class="text-center">
          <el-radio-group v-model="recordType">
            <el-radio-button
              v-for="item in recordTypeOption"
              :key="item.id"
              :label="item.id"
              >{{ item.label }}</el-radio-button
            >
          </el-radio-group>
        </el-col>
      </el-row>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="recordTypeDialog.open = false">取 消</el-button>
          <el-button type="primary" @click="handleRecord">进入新增</el-button>
        </span></template
      >
    </el-dialog>
    <!-- 选择新增实施记录表单弹窗 -->
    <el-dialog
      v-if="recordFormDialog.open"
      v-model="recordFormDialog.open"
      :close-on-click-modal="false"
      :title="recordFormDialog.title"
      width="80%"
    >
      <SituationForm
        v-if="recordType == 'ssqk'"
        :situationData="initForm"
        @processFun="processFun"
        @saveFun="saveFun"
      />
      <ProjectChangeForm
        v-if="recordType == 'bgsq'"
        :projectChangeData="initForm"
        @processFun="processFun"
        @saveFun="saveFun"
      />
      <ClosingReportForm
        v-if="recordType == 'jxbg'"
        :closingReportData="initForm"
        @processFun="processFun"
        @saveFun="saveFun"
      />
    </el-dialog>
  </div>
</template>

<script name="ProjectDetails" setup>
import { useRoute, useRouter } from 'vue-router'
import pOverview from './modules/pOverview.vue'
import TenderInfos from './modules/tenderInfos.vue'
import CheckAndAccept from './modules/checkAndAccept.vue'
import ProjectStatus from './modules/projectStatus.vue'
import ApprovalRecord from './modules/approvalRecord.vue'
import Acceptance from './modules/acceptance.vue'
import ProjectContract from './modules/projectContract.vue'
import SituationForm from '@/views/salesManage/projectManage/ImplementRecords/situationForm'
import ProjectChangeForm from '@/views/salesManage/projectManage/ImplementRecords/projectChangeForm'
import ClosingReportForm from '@/views/salesManage/projectManage/ImplementRecords/closingReportForm'
import RecordsTable from '@/views/salesManage/projectManage/ImplementRecords/recordsTable'
import * as Api from '@/api/projectManage/project'
import { project_status, project_phase } from '@/hooks/dict/useProject'
import { contractInfoListNoPriv } from '@/api/salesManage/contractManage'
import Appendix from '@/businessComponents/Appendix'
import AppendixList from '@/businessComponents/AppendixList'
import FollowUp from '@/businessComponents/FollowUp'
import FollowUpList from '@/businessComponents/FollowUpList'
import OperationLog from '@/businessComponents/OperationLog'
import InvoiceRecord from '@/businessComponents/InvoiceRecord'
import RepaymentRecord from '@/views/financialManage/repaymentManage/modules/repaymentRecord'
import DetailsOrderList from '@/businessComponents/DetailsOrderList'
import TaskFrom from '@/views/rsgl/taskManage/modules/add.vue'
import taskDetailsForm from '@/views/salesManage/businessManage/businessDetails/modules/taskDetails.vue' /* 任务列表 */
import { getFocus, saveFocus } from '@/api/common/common'
import { listRepaymentRecord } from '@/api/repaymentManage/repayment'
import useUserStore from '@/store/modules/user'
const { proxy } = getCurrentInstance()
const router = useRouter()
const route = useRoute()
const projectId = ref(null)
const props = defineProps({
  id: {
    type: String || Number
  }
})
const starFocus = ref(false)
const data = reactive({
  activeTabsName: '1', //分标签name
  baseDetail: {}, //基本详情
  financeDetail: {}, //投标项目财务 信息
  biddingDetail: {}, //投标结果反馈
  contractTable: [], //合同信息
  acceptanceTable: [], //验收列表
  /** 验收登记 */
  checkParam: {},
  // 状态更新
  assemblyParam: {},
  appendixParam: {}, //附件记录
  followUpParam: {}, //跟进
  followUpListParams: {}, //跟进列表参数
  acceptMsg: {} // 验收登记消息通知
})
const {
  activeTabsName,
  baseDetail,
  financeDetail,
  biddingDetail,
  contractTable,
  acceptanceTable,
  checkParam,
  assemblyParam,
  appendixParam,
  followUpListParams,
  followUpParam,
  acceptMsg
} = toRefs(data)

const recordType = ref('ssqk')
const recordTypeOption = ref([
  {
    id: 'ssqk',
    label: '实施情况'
  },
  {
    id: 'bgsq',
    label: '变更申请'
  },
  {
    id: 'jxbg',
    label: '结项报告'
  }
])
const recordTypeDialog = ref({
  title: '选择新增实施记录类型',
  open: false
})
const recordFormDialog = ref({
  title: computed(() => {
    return `项目${
      recordTypeOption.value.filter(item => item.id == recordType.value)[0]
        .label
    }`
  }),
  open: false
})
const initForm = ref({})
const handleRecord = async () => {
  // 获取合同名称
  let contractName = contractTable.value
    .map(item => item.contractName)
    .toString()
  let contractNum = contractTable.value.map(item => item.contractNum).toString()

  let repaymentList = []
  let repaymentPrice = 0
  if (recordType.value == 'jxbg') {
    // 获取回款列表
    let res = await listRepaymentRecord({
      projectId: baseDetail.value.projectId
    })
    repaymentList = res.rows
    repaymentList.forEach(item => {
      repaymentPrice += item.price
    })
  }
  recordTypeDialog.value.open = false
  initForm.value = {
    projectId: baseDetail.value.projectId,
    proName: baseDetail.value.proName,
    proNum: baseDetail.value.proNum,
    projectLeader:
      recordType.value == 'ssqk' ? baseDetail.value.principalId : undefined,
    projectLeaderName:
      recordType.value == 'ssqk' ? baseDetail.value.principal : undefined,
    manager:
      recordType.value == 'jxbg' ? baseDetail.value.principalId : undefined,
    managerName:
      recordType.value == 'jxbg' ? baseDetail.value.principal : undefined,
    customer:
      recordType.value == 'jxbg' ? baseDetail.value.customer : undefined,
    contractName: recordType.value == 'jxbg' ? contractName : undefined,
    contractNum: recordType.value == 'jxbg' ? contractNum : undefined,
    income: recordType.value == 'jxbg' ? baseDetail.value.proSum : undefined,
    repayment:
      recordType.value == 'jxbg' && repaymentPrice > 0
        ? repaymentPrice
        : undefined
  }
  recordFormDialog.value.open = true
}
const processFun = val => {
  console.log('发起申请==》', val)
  recordFormDialog.value.open = false
  baseDetail.value = { ...baseDetail.value }
}
const saveFun = val => {
  console.log('保存==》', val)
  baseDetail.value = { ...baseDetail.value }
}

/**
 * 初始化方法
 */
const scaleMarkVos = ref([])
const fistParams = ref({}) //发票记录 参数
async function init() {
  // 查询项目详情数据
  const response = await Api.getProInfo({ projectId: projectId.value })
  baseDetail.value = response.data.pro || {} //基本信息
  financeDetail.value = response.data.finance || {} //投标项目财务 信息
  biddingDetail.value = response.data.bidding || {} //投标结果反馈
  scaleMarkVos.value = response.data.scaleMarkVos || []
  /*** 跟进情况 操作日志 附件列表等模块 */
  setParams()
  // 请求合同信息
  const contractRes = await contractInfoListNoPriv({
    projectId: projectId.value,
    pageNum: 1,
    pageSize: 99999
  })
  contractTable.value = contractRes.data.records
  //请求验收列表
  const acceptance = await Api.getListByProjectId({
    project_id: projectId.value
  })
  acceptanceTable.value = acceptance.data
  // 重点关注
  const focusRes = await getFocus({
    businessId: projectId.value,
    tableName: 'ord_project'
  })
  starFocus.value = focusRes.data
  // const resp = await getLatestMsg({
  //   businessId: '项目-投标-' + baseDetail.value.projectId
  // })
  // if (resp.code === 200 && resp.data) {
  //   baseDetail.value.checkbox = resp.data.reminderMethod.split(',')
  //   baseDetail.value.bidReminder = resp.data.followType
  // }
  // const respTb = await getLatestMsg({
  //   businessId: '项目-登记-' + baseDetail.value.projectId
  // })
  // if (respTb.code === 200 && respTb.data) {
  //   acceptMsg.value.reminderMethod = respTb.data.reminderMethod.split(',')
  //   acceptMsg.value.receiver = respTb.data.receiver
  //   acceptMsg.value.receiverName = respTb.data.receiverName
  // }
  // 发票记录 订单记录
  fistParams.value = {
    id: projectId.value,
    name: baseDetail.value.proName,
    type: 'project',
    btnShow: false
  }
  setTaskDetails()
}
/*** 跟进情况 操作日志 附件列表等模块 */
const setParams = () => {
  followUpListParams.value = {
    businessId: projectId.value,
    busineName: baseDetail.value.proName,
    tableName: 'ord_project'
  }
}
/** 任务模块 */
const taskParam = ref({}) // 任务模块
const taskDetailsParam = ref({}) //任务详情
const setTaskDetails = () => {
  taskDetailsParam.value = {
    businessType: '1',
    businessId: projectId.value, //业务id
    businessName: baseDetail.value.proName //标题
  }
}
const userStore = useUserStore()
/**
 * 切换重点关注
 */
function focusChange() {
  let params = {
    businessId: projectId.value,
    tableName: 'ord_project',
    userId: userStore.user.userId,
    focus: starFocus.value
  }
  saveFocus(params).then(res => {
    proxy.$modal.msgSuccess('操作成功')
  })
}
/**
 * 弹出框 弹出事件
 * @param {*} type
 */
const clickFn = type => {
  switch (type) {
    case 'check':
      checkParam.value.visible = true
      break
    case 'project':
      //投标项目立项模板导出
      proxy.downLoadByUrl(
        '/ord/order/ordproject/projectExport?projectId=' + projectId.value,
        {},
        `立项审批表（${baseDetail.value.proName}）.xlsx`
      )
      break
    case 'bidding':
      //投标项目立项模板导出
      proxy.downLoadByUrl(
        '/ord/order/ordbiddinginformation/resultsExport?projectId=' +
          projectId.value,
        {},
        `投标结果反馈表（${baseDetail.value.proName}）.xlsx`
      )
      break
    case 'biddingResults':
      //投标结果反馈
      router.push({
        path: '/sales/projectManage/biddingResults',
        query: { id: biddingDetail.value.bid }
      })
      break
    case 'status':
      assemblyParam.value.visible = true
      assemblyParam.value.projectId = projectId.value
      assemblyParam.value.status = baseDetail.value.status
      assemblyParam.value.proSchedule = baseDetail.value.proSchedule
      break
    case 'order':
      // 订单--跳转到订单新增页
      let salesOrderData = {
        customerId: baseDetail.value.cusId,
        customerName: baseDetail.value.customer,
        projectId: projectId.value,
        proName: baseDetail.value.proName
      }
      router.push({
        path: '/sales/indent/salesOrderForm',
        query: {
          salesOrderData: JSON.stringify(salesOrderData)
        }
      })
      break
    case 'contract':
      // 合同
      router.push({
        path: '/sales/contract/newContract',
        query: {
          ordProjectId: projectId.value,
          ordProjectName: baseDetail.value.proName,
          pb: financeDetail.value.pb,
          customerId: baseDetail.value.cusId,
          customerName: baseDetail.value.customer
        }
      })
      break
    case 'task':
      // 任务
      //   taskParam.value.isVisible = true
      //   taskParam.value.businessType = '1'
      //   taskParam.value.businessId = projectId.value
      //   taskParam.value.businessName = baseDetail.value.proName
      let object = {
        businessType: '1',
        businessId: projectId.value,
        businessName: baseDetail.value.proName
      }
      router.push({
        path: '/rsgl/other/addTasking',
        query: { taskParam: JSON.stringify(object) }
      })

      break
    case 'word':
      // 工单
      break
    case 'followUp':
      // 跟进
      followUpParam.value.isVisible = true
      followUpParam.value.tableName = 'ord_project'
      followUpParam.value.businessId = projectId.value
      followUpParam.value.customer = baseDetail.value.customer
      followUpParam.value.proName = baseDetail.value.proName
      break
    case 'appendix':
      // 附件
      appendixParam.value.isVisible = true
      appendixParam.value.tableName = 'ord_project'
      appendixParam.value.businessId = projectId.value
      break
    case 'xm-appendix':
      // 附件
      appendixParam.value.isVisible = true
      appendixParam.value.tableName = 'ord_project.materials'
      appendixParam.value.businessId = projectId.value
      break
  }
}
// 组件关闭隐藏
const closeFn = row => {
  switch (row) {
    case 'check':
      //验收登记 弹出框关闭时操作
      checkParam.value.visible = false
      init()
      break
    case 'status':
      //状态更新 弹出框关闭时操作
      init()
      assemblyParam.value.visible = false
      break
    case 'contractStatus':
      // 合同信息 操作完成
      init()
      break
    case 'task':
      // 任务
      taskParam.value.isVisible = false
      setTaskDetails()
      break
    case 'word':
      // 工单

      break
    case 'followUp':
      // 跟进
      followUpParam.value.isVisible = false
      setParams()
      break
    case 'appendix':
      // 附件
      appendixParam.value.isVisible = false
      setParams()
      break
    case 'xm-appendix':
      // 项目材料上传
      appendixParam.value.isVisible = false
      init()
      break
  }
}
watch(
  () => route,
  (newVal, oldVal) => {
    if (route.query && location.href.match(/projectDetails/)) {
      //项目详情
      projectId.value = route.query && route.query.id
      // 消息推送 待办跳转详情页的时候跟进模块
      if (route.query && route.query.tabPane) {
        activeTabsName.value = route.query.tabPane
      }
      init()
    } else if (
      (props.id && !!location.href.match(/detail/)) ||
      (props.id && !!location.href.match(/workDetail/))
    ) {
      // 待办详情-访问
      projectId.value = props.id
      init()
    }
  },
  {
    deep: true,
    immediate: true
  }
)
</script>

<style lang="scss" scoped>
@import '@/assets/styles/detailsStyle.scss';
.box-card {
  min-height: 85vh;
}
.details {
  ::v-deep .details-left .el-card__body {
    padding: 15px 0px 20px 0px;
  }
  ::v-deep .el-checkbox-button__inner {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .dropdown ::v-deep .el-dropdown {
    width: 100%;
  }
  .details-left-top {
    img {
      @include wh(80px, 80px);
      display: block;
      margin: 15px auto;
    }
    .top-img {
      border-radius: 12.5rem;
      background: #ff933c;
      @include wh(80px, 80px);
      margin: 10px auto;
      i {
        background-color: #fff;
        line-height: 80px;
        margin: 18px auto;
      }
    }
  }
  // 项目资产概括
  .xmzcgk {
    .el-col {
      margin-bottom: 15px;
      &:last-child {
        margin-bottom: 0px;
      }
    }
  }
}
</style>
